extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/productDetail.min.css')
    include common/head
    div.all-container
        div.container.clearfix
            div.container-top.clearfix
                div.all-search
                    div.search-container
                        div.select-block
                            select
                                option 本店
                                option 全网
                        div.input-block
                            i.icon.icon-search
                            input(type="text")
                            button 搜索
                div.left-logo
                    img(src="../image/icon_logo.png")
        div.logo-container
            img(src='../image/main15.png')
        div.container-bottom
            div.tab-container.clearfix
                div.white-bg.deco-color
                    div.deco-item 店铺首页
                    div.deco-item 全部宝贝
                    div.deco-item 上装
                        i.icon
                        div.hidden-cate
                            a 衬衫
                            a 针织毛衣
                            a 衬衫
                    div.deco-item 下装
                        i.icon
                        div.hidden-cate
                            a 衬衫
                            a 针织毛衣
                            a 衬衫
                    div.deco-item 裙装
                        i.icon
                        div.hidden-cate
                            a 衬衫
                            a 针织毛衣
                            a 衬衫
            div.container-detail.clearfix
                div.detail-left
                    div.big-image
                        img(src='https://img.alicdn.com/imgextra/i2/2096872171/TB2zyQVXkvlJKJjy0FbXXbTcpXa_!!2096872171.jpg_430x430q90.jpg')#mImg
                        div.mask
                    div.superMask
                        img(src="https://img.alicdn.com/imgextra/i2/2096872171/TB2zyQVXkvlJKJjy0FbXXbTcpXa_!!2096872171.jpg_430x430q90.jpg").hidden-img
                    div.small-image
                        img(src='../image/main5.png')
                        img(src='../image/main6.png')
                        img(src='../image/main2.png')
                        img(src='../image/main3.png')
                        img(src='../image/main4.png')
                div.detail-center.clearfix
                    div.detail-title 花栗鼠小姐 红色格子V领连衣裙夏季小清新韩版
                    div.describe 自然清爽的配色搭质感透气舒适的面料，很符合我想要舒适度夏的标准。收边的V领口大小正好 ，视觉效果非常显瘦。袖筒在肩膀处做了些许褶皱更添复古感……
                    div.info-total
                        div.info-price
                            div.price-left
                                div.normal-price
                                    div 价格
                                        span.first-price ￥135
                                div.discount-price
                                    div 淘宝价
                                        span.last-price ￥133.65
                            div.review-left
                                span.border-1px
                                    div 1104
                                    div(style={'font-size': '12px'}) 累计评论
                                span
                                    div 43
                                    div(style={'font-size': '12px'}) 交易成功
                        div.favourite
                            div 优惠
                            div
                                img(src='../image/fav.png')
                            div(style={"margin-left":"3px"}) 5元店铺优惠券，满100可使用
                            div
                                a.red-font 领取
                        div.express
                            div 运费
                            div 新疆维吾尔自
                            div
                                span 至
                                div.select-block
                                    select
                                        option(value=1) 西湖区
                                        option(value=2) 上城区
                                        option(value=3) 下城区
                                        option(value=4) 江干区
                                        option(value=5) 广西壮族自治区啊啊啊
                            div 快递
                            div
                                div.select-block
                                    select
                                        option(value=1) 免运费
                                        option(value=2) 运费
                        div.models.clearfix
                            div.sizes.clearfix
                                span 尺码
                                div.active-btn S
                                div M
                                div L
                            div.colors.clearfix
                                span 颜色
                                div.active-btn 粉色
                                div 黄色
                                div 粉色
                                div 黄色
                            div.counts.clearfix

                                span 数量
                                button.reduce.btn-min
                                    i.reduce-icon
                                input(type='text' value='1' onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/" )
                                button.add-btn
                                    i
                            div.btn-group
                                a.btn-orange.person 立即购买
                                a.btn-orange.add 加入购物车

                div.detail-right
                    div.seller-top
                        span.line
                        span 钻石卖家
                        span.line
                    div.seller-middle
                        div.middle-info
                            h4 这是一家好店铺
                            div 信誉:
                                i.icon.icon-heart
                                i.icon.icon-heart
                                i.icon.icon-heart
                            div 掌柜:
                                span 王雄
                            div 开店时间:
                                span 2017-09-08
                            div 店铺所在地:
                                span 杭州市
                            div.resource 资质
                                i.icon.icon-zizhi
                                span
                                    i.icon.icon-price2(style={'margin-top':"-4px"})
                                    |1001元
                        div.middle-data.clearfix
                            div.func
                                div 描述
                                div.cent 5.0
                            div.func
                                div 服务
                                div.cent 5.0
                            div.func
                                div 物流
                                div.cent 5.0
                            a.enter 进入店铺
                            a.enter 收藏店铺
                    div.seller-code
                        div 手机看本店
                        img(src="../image/code2.png")
            div.detail-info.clearfix
                div.right-info
                    div.search
                        div.red-bg.deco-color 店内搜
                        div.search-inner
                            span 关键字：
                            input(type='text').keyword
                            span 价格：
                            input(type='text')
                            span -
                            input(type="text")
                            a.btn-orange 搜索
                    div.classify.clearfix
                        p.deco-color.red-bg 商品分类
                        div.class-content
                            div.level-1 查看全部宝贝
                            div.level-2.all-find
                                a 按综合
                                a 按销量
                                a 按新品
                                a 按价格
                            div.level-1 NEW ARRIVALS
                            div.level-2
                                a 2018.3.06NEW
                                a 春季新装Winn
                                a 2017.12.12双十二
                                a 2018.1.25NEW
                                a 2018.3.06NEW
                                a 春季新装Winn
                                a 2017.12.12双十二
                                a 2018.1.25NEW
                            div.level-1 折扣专区
                            div.level-2
                                a 2018.3.06NEW
                                a 春季新装Winn
                                a 2017.12.12双十二
                                a 2018.1.25NEW
                                a 2018.3.06NEW
                                a 春季新装Winn
                                a 2017.12.12双十二
                                a 2018.1.25NEW
                    div.product
                        div.red-bg.deco-color 商品排行
                        div.product-list
                            div.btn-group
                                a.btn-orange  销售量
                                a.btn-orange  收藏数
                            div.title.clearfix
                                img(src="../image/main2.png")
                                span 花栗鼠小姐 红色格子V领
                                span ￥
                                    b 135.00
                                span 已收藏11890笔
                            div.title.clearfix
                                img(src="../image/main2.png")
                                span 花栗鼠小姐 红色格子V领
                                span ￥
                                     b 135.00
                                span 已收藏11890笔
                            div.title.clearfix
                                img(src="../image/main2.png")
                                span 花栗鼠小姐 红色格子V领
                                span ￥
                                    b 135.00
                                span 已收藏11890笔
                            div.title.clearfix
                                img(src="../image/main2.png")
                                span 花栗鼠小姐 红色格子V领
                                span ￥
                                    b 135.00
                                span 已收藏11890笔
                            div.title.clearfix
                                img(src="../image/main2.png")
                                span 花栗鼠小姐 红色格子V领
                                span ￥
                                    b 135.00
                                span 已收藏11890笔
                div.left-info
                    div.info-head.clearfix
                        ul
                            li.active-btn 宝贝详情
                            li 累计评论
                                span 1104
                        div.phone 手机购买
                            img(src="../image/code2.png")
                    div.info-body.data-item
                        div.body-top.clearfix
                            div 廓形: A型
                            div 货号: C1707104
                            div 风格: 通勤
                            div 通勤: 韩版
                            div 组合形式: 单件
                            div 裙长: 中裙
                        div.body-center
                            img(src='../image/good3.png')
                            img(src='../image/good3.png')
                            img(src='../image/good3.png')
                            img(src='../image/good3.png')
                    div.info-review.clearfix.data-item
                        div.item-review.clearfix
                            div.info-review-left
                                img(src='../image/main5.png')
                                div.shop-name aaaaaa
                                div(style={"text-align":'center'})
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                            div.info-review-right
                                div 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。
                                div.image
                                    img(src='../image/main5.png')
                                p 2018-03-03 12:13:23
                        div.item-review.clearfix
                            div.info-review-left
                                img(src='../image/main5.png')
                                div.shop-name aaaaaa
                                div(style={"text-align":'center'})
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                            div.info-review-right
                                div 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。
                                div.image
                                    img(src='../image/main5.png')
                                p 2018-03-03 12:13:23
                                div.add-review
                                    div.add-detail
                                        span [追加评论]
                                        |宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝
                                    p  2018-03-03 12:13:23
                        div.item-review.clearfix
                            div.info-review-left
                                img(src='../image/main5.png')
                                div.shop-name aaaaaa
                                div(style={"text-align":'center'})
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                            div.info-review-right
                                div 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。
                                div.image
                                    img(src='../image/main5.png')
                                p 2018-03-03 12:13:23
                                div.add-review
                                    div.add-detail
                                        span [追加评论]
                                        |宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝
                                    p  2018-03-03 12:13:23
                                div.add-review
                                    div.add-detail
                                        span [追加评论]
                                        | 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝
                                    p  2018-03-03 12:13:23

                        div.item-review.clearfix
                            div.info-review-left
                                img(src='../image/main5.png')
                                div.shop-name aaaaaa
                                div(style={"text-align":'center'})
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart.hidden
                                    i.icon.icon-heart
                                    i.icon.icon-heart.hidden
                            div.info-review-right
                                div 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。
                                div.image
                                    img(src='../image/main5.png').hidden
                                p 2018-03-03 12:13:23
                                div.add-review.hidden
                                    div.add-detail
                                        span [追加评论]
                                        |宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝
                                    p  2018-03-03 12:13:23
                        div.item-review.clearfix
                            div.info-review-left
                                img(src='../image/main5.png')
                                div.shop-name aaaaaa
                                div(style={"text-align":'center'})
                                    i.icon.icon-heart
                                    i.icon.icon-heart
                                    i.icon.icon-heart.hidden
                                    i.icon.icon-heart
                                    i.icon.icon-heart.hidden
                            div.info-review-right
                                div 宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。
                                div.image
                                    img(src='../image/main5.png').hidden
                                p 2018-03-03 12:13:23
                                div.add-review.hidden
                                    div.add-detail
                                        span [追加评论]
                                        |宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝质量很好，老板很nice。宝贝
                                    p  2018-03-03 12:13:23
                        div.pages-container
                            ul.pagination
                                li.disabled
                                    a(href="#") <
                                li
                                    a(href="#") 1
                                li.active
                                    a(href="#") 2
                                li
                                    a(href="#") 3
                                li
                                    a(href="#") 4
                                li
                                    a(href="#") ...
                                li
                                    a(href="#") 17
                                li
                                    a(href="#") >
        script.

            //切换评论
            function changeActive(){
                $(this).addClass("active-btn")
                $(this).siblings().removeClass("active-btn")
            }
            //数量加减函数
            function formatCount(ele, type) {
                if (!$(ele).prop("disabled")) {
                    var count = $(ele).parent().find("input").val();
                    type == "add" ? count++ : count--;
                    $(ele).parent().find("input").val(count);
                    if (count > 1) {
                        $(ele).parent().find(".reduce").prop("disabled", false);
                    } else {
                        $(ele).parent().find(".reduce").prop("disabled", true);
                    }
                }
            }
            //图片切换
            function changeImage(){
                var data_src= $(this).prop('src')
                $('.big-image img').prop('src',data_src)
                $(this).addClass('border-2px').siblings().removeClass('border-2px')
            }
            $(".btn-min").click(function () {
                formatCount(this, 'min')
            });

            $(".add-btn").click(function () {
                formatCount(this, 'add')
            });
            //图片初始化
             function initImage() {
                 var first_image = $('.small-image img').eq(0).prop('src');
                 $('.big-image img').prop('src', first_image)
                 $('.small-image img').eq(0).addClass('border-2px')
             }
            function changeImage () {
                this.srcl = $(this).prop('src')
                $('.big-image img').prop('src', this.srcl)
                $(this).addClass('border-2px').siblings().removeClass('border-2px')
            };
             //放大镜
            $(".big-image").mouseover(function () {
                var src_img=$("#mImg").prop('src')
                $('.hidden-img').prop('src',src_img)
                $('.mask').show();
                $(".superMask").show();
            })
            $(".big-image").mouseout(function () {
                $('.mask').hide();
                $(".superMask").hide();

            })
            $('.big-image').on('mousemove', function (event) {
                var left = event.pageX - $(this).offset().left - parseFloat($('.mask').width()) / 2;
                var top = event.pageY - $(this).offset().top - parseFloat($('.mask').height()) / 2;
                if (left < 0) {
                    left = 0
                } else if (left > $(this).width() - $('.mask').width()) {
                    left = $(this).width() - $('.mask').width();
                }
                if (top < 0) {
                    top = 0;
                } else if (top > $(this).height() - $('.mask').height()) {
                    top = $(this).height() - $('.mask').height();
                }
                $('.mask').css({
                    left: left + 'px',
                    top: top + 'px'
                });
                var rate = $('.superMask').width() / $('.big-image').width();
                $('.hidden-img').css({
                    left: -rate * left * 2 + 'px',
                    top: -rate * top * 2 + 'px'
                });
            });

            //执行
            $(function(){
                initImage();
                $('.info-head li').click(function(){
                    $(this).addClass('active-btn').siblings().removeClass('active-btn')
                    var index = $(this).index();  //获取当前li标签的个数
                    $('.data-item').eq(index).show().siblings('.data-item').hide();
                });
                $('.sizes div').click(changeActive);
                $('.colors div').on('click',changeActive);
                $('.small-image img').mouseover(changeImage);
                // if(getCookie('qin')==''){
                //     alert(2)
                //     setCookie('qin', 'user', '1')
                //
                // }else{
                //     console.log(1)
                // }
                // setCookie('qinasd', 'user', '1')
            })
            //
